<template>
  <div class="login">
    <div class="login-top-bg">
      <h1>冻眠市场系统</h1>
    </div>
    <div class="login-section">
      <van-field :border="false" class="login-section-adp " :left-icon="require('@/assets/login/image/tel.png')" v-model="tel" type="tel" placeholder="请输入用户名或手机号码" :rules="[{ required: true }]" />
      <div v-show="showcode">
        <van-field :border="false" class="login-section-adp login-position" type="number" maxlength="6" :left-icon="require('@/assets/login/image/code.png')" v-model="code" placeholder="请输入验证码" :rules="[{ required: true }]" />
        <van-button class="get-code" color="#1BB89C" :disabled="true" v-show="disable" round native-type="button">重新获取</van-button>
        <van-button class="get-code" color="#1BB89C" v-show="enable" round @click="getCode()" native-type="button">获取验证码</van-button>
      </div>
      <div v-show="showpwd">
        <van-field :border="false" class="login-section-adp " :left-icon="require('@/assets/login/image/pwd.png')" v-model="pwd" type="password" placeholder="请输入密码" :rules="[{ required: true }]" />
      </div>
      <van-button class="login-section-adp" size="16px" color="#1BB89C" native-type="submit" block round @click="onLogin()">登 录</van-button>
      <div class="pwd-login">
        <router-link to="" @click.native="toReg(1)"><span>注册账号</span></router-link>
        <div class="codelogin" v-if="showpwd==true" @click="onSwitch1"><span>验证码登录</span></div>
        <div class="pwdlogin" v-if="showcode==true" @click="onSwitch2"><span>密码登录</span></div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';

export default {
  name: 'Login',
  data () {
    return {
      tel: '',
      pwd: '',
      code: '',
      enable: true,
      disable: false,
      showcode: true,
      showpwd: false,
    };
  },
  methods: {
    onSwitch1 () {
      this.showcode = true
      this.showpwd = false
    },
    onSwitch2 () {
      this.showcode = false
      this.showpwd = true
    },
    toReg (keys) {
      this.$router.push({ path: `/reg/${keys}` })
    },
    // 获取验证码限制为1分钟
    getCode () {
      if (this.tel == '' || this.tel == null) {
        Toast.fail('请输入手机号码')
      } else {
        Toast.loading('正在获取验证码')
        this.enable = false;
        this.disable = true;
        if (this.disable == true) {
          setTimeout(() => {
            this.enable = true;
            this.disable = false;
          }, 61000);
        }
      }
      this.$notoken("/weixin/sendcode", {
        user_name: this.tel,
      })
        .then((res) => {
          if (res.data.code == 1) {
            Toast.success(' 发送成功 \n 请注意查收')
          } else {
            Toast.fail('该号码当日接收验证码上限')
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 登录
    onLogin () {
      if (this.showcode == true) {
        let params = new FormData()
        params.append('user_name', this.tel)
        params.append('code', this.code)
        params.append('type', 1) //1-验证码登录；2-密码登录
        this.$notoken("/weixin/getlogin", params)
          .then((res) => {
            if (res.data.code == 1) {
              Toast.loading('登录成功')
              localStorage.setItem("userInfo", JSON.stringify(res.data.data))
              localStorage.setItem("token", res.data.data.token)
              setTimeout(() => {
                Toast.success('登录成功')
                this.$router.push({ name: "my" })
              }, 1000);
            } else {
              Toast.fail(res.data.msg)
            }
          })
          .catch((err) => {
            console.error('参数错误' + err);
          })
      } else {
        let params = new FormData()
        params.append('user_name', this.tel)
        params.append('password', this.pwd)
        params.append('type', 2) //1-验证码登录；2-密码登录
        this.$notoken("/weixin/getlogin", params)
          .then((res) => {
            if (res.data.code == 1) {
              Toast.loading('登录成功')
              localStorage.setItem("userInfo", JSON.stringify(res.data.data))
              localStorage.setItem("token", res.data.data.token)
              setTimeout(() => {
                Toast.success('登录成功')
                this.$router.push({ name: "my" })
              }, 1000);
            } else {
              Toast.fail(res.data.msg)
            }
          })
          .catch((err) => {
            console.error('参数错误' + err);
          });
      }
    },
  },
}
</script>

<style lang="less" scoped>
body {
  background-color: #fff;
}
.login {
  display: flex;
  flex-direction: column;
  &-position {
    /deep/ .van-field__control {
      width: 60%;
    }
  }
  .login-top-bg {
    display: flex;
    width: 100%;
    height: 400px;
    background-color: #1bb89c;
    h1 {
      width: 100%;
      color: #fff;
      font-size: 45px;
      font-weight: normal;
      text-align: center;
      padding-top: 100px;
    }
  }
  .login-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 650px;
    height: 500px;
    margin: -150px auto 0;
    background-color: #fff;
    border-radius: 22px;
    box-shadow: 0 3px 8px rgba(16, 16, 16, 0.1);
    &-adp:first-child {
      margin-top: 25px;
    }
    &-adp {
      width: 80%;
      height: 88px;
      margin: 25px auto;
    }
    /deep/ .van-cell {
      border-radius: 100px;
      background: rgba(16, 16, 16, 0.06);
    }
    .get-code {
      position: absolute;
      top: 441px;
      right: 112px;
    }
    .pwd-login {
      display: flex;
      justify-content: space-between;
      width: 450px;
      height: 30px;
      margin: 0 auto;
      font-size: 26px;
      text-align: right;
      .pwdlogin,
      .codelogin,
      a {
        color: #1bb89c;
      }
    }
  }
}
</style>